<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script th:src="@{/layui/layui.js}"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script th:inline="javascript">
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        table.render({
            elem: '#test'
            , url: 'http://localhost:8080/orders/queryAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cellMinWidth: 100
            , title: '订单数据表'
            , cols: [
                [{field: 'id', title: '订单编号', fixed: 'left',width:110, align: 'center', unresize: true, sort: true}
                , {field: 'userId', title: '用户名', width:100,align: 'center',templet: function (res) {
                        return res.user.userName;
                    }}
                , {field: 'shopId', title: '店铺名', width:100, align: 'center',templet: function (res) {
                        return res.shop.shopName;
                    }}
                , {field: 'content', title: '订单内容',  align: 'center'}
                , {field: 'type', title: '订单类型',  width:100,align: 'center'}
                , {field: 'state', title: '订单状态',  width:100,align: 'center'}
                , {field: 'sum', title: '数量',width:80,align: 'center'}
                , {field: 'cost', title: '费用',width:80,align: 'center',sort: true}
                , {field: 'time', title: '付款时间',align: 'center',width:180}],
            ]
            , page: true
            , limits: [5, 10, 20]
            , limit: 10
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                }
            }
        });
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'search':
                    let keyword = $("input[name=keyword]").val();
                    table.reload('test', {
                        url: "http://localhost:8080/orders/queryAll?keyword=" + keyword
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>